<template>
  <div>
    <qa-table-query :columns="queryForm.columns" v-model="queryForm.formData" @search="search"></qa-table-query>
    <qa-table ref="tableRef" :action="table.action" :columns="table.columns" :query-form-param="queryForm"
      :right-btns="['detail_auto',  'delete']" size="default" :border="true" @update="updateBtn"
      @delete="deleteBtn"></qa-table>

    <qa-dialog :title="form.props.title" v-model="form.props.show" v-slot="slotProps">
      <qa-form v-model="form.data" :rules="form.props.rules" :columns="form.props.columns"
        :closeDialog="slotProps.closeDialog" :labelWidth="100" :action="form.props.action"
        :formType="form.props.formType" @success="form.props.show = false; tableRef?.refresh()"></qa-form>
    </qa-dialog>
  </div>
</template>

<script setup lang="ts">
import qaTable from '@/components/qa-table.vue'
import qaDialog from '@/components/qa-dialog.vue';
import qaForm from '@/components/qa-form.vue';
import qaTableQuery from '@/components/qa-table-query.vue';

const originalForms: any = {}; // 表单初始化数据

const tableRef = ref<InstanceType<typeof qaTable> | null>(null);
const table = ref({
  action: '/admin/system/sysLog/sysyemLog/getList',
  columns: [
    {
      key: "_add_time",
      title: "时间",
      type: "time",
      width: 250,
      valueFormat: "yyyy年M月dd hh:mm:ss",
    },
    {
      key: "",
      title:"请求信息",
      type: "group",
      columns: [
        {
          key: "$url",
          title: "请求地址",
          type: "text",
          align: "left",
        },
        {
          key: "requestId",
          title: "请求ID",
          type: "text",
          align: "left",
        },
        {
          key: "method",
          title: "请求方式",
          type: "tag",
          data: [
            { value: 'GET', label: "GET", tagType: "success" },
            { value: 'POST', label: "POST", tagType: "primary" }
          ],
          align: "left"
        }
      ]
    },
          {
            key: "statusCode",
            title: "状态码",
            type: "tag",
            width: 100,
            data: [
              { value: 200, label: "200", tagType: "success" },
              { value: 201, label: "201", tagType: "primary" },
              { value: 400, label: "400", tagType: "danger" },
            ],
          },
    // {
    //   key:"headers",
    //   type:"json",
    //   title:"请求头",
    //   width: 800
    // },
    // {
    //   key:"responseBody",
    //   type:"json",
    //   title:"请求结果",
    // }
  ]
})


const defaultParentId = ref(null)

const queryForm = ref({
  formData: {
  },
  columns: [
    {
      key: "_add_time",
      type: "datetimerange",
      title: "添加时间",
      "mode": "[]"
    },
    {
      key: "requestId",
      type: "text",
      title: "请求ID",
      mode: "="
    }
  ]
})


const form = ref({
  data: {
    parent_id: null,
    menu_id: ""
  },
  props: {
    title: "",
    action: "",
    columns: [

    ],
    rules: {

    },
    formType: 'add' as 'add' | 'update',
    show: false
  }
})

originalForms['data'] = JSON.parse(JSON.stringify(form.value.data));


const addBtn = () => {
  form.value.data = { ...originalForms['data'] }
  form.value.data.parent_id = defaultParentId.value
  form.value.data.menu_id = defaultParentId.value ? defaultParentId.value + '-' : '';
  form.value.props.action = '/admin/system/sysLog/sysyemLog/add';
  form.value.props.formType = "add"
  form.value.props.title = '添加';
  form.value.props.show = true
}

const deleteBtn = (row: any, deleteFn: (params: { action: string, data: any }) => Promise<void>) => {
  deleteFn({
    action: '/admin/system/sysLog/sysyemLog/delete',
    data: {
      _id: row._id
    }
  })
}
const updateBtn = (row: any) => {
  form.value.data = row
  form.value.props.action = '/admin/system/sysLog/sysyemLog/update';
  form.value.props.formType = "update"
  form.value.props.title = '编辑';
  form.value.props.show = true
}

const search = () => {
  if (tableRef.value) {
    (tableRef.value as { Search: () => void }).Search();
  }
}
</script>

<style scoped></style>
